<template>
    <!--审核页面-->

    <div style="padding: 10px;;">
        <div style="margin: 10px 0" align="center">
            <el-input v-model="search" placeholder="请输入关键字" @keyup.enter.native="load" style="width: 20%"
                      clearable=""></el-input>
            <el-button type="primary" style="margin: 2px " @click="load">查询</el-button>
        </div>

        <!--表格-->
        <el-table
                :data="tableData"
                border
                stripe=""
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    sortable=""
            >
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名"
            >
            </el-table-column>
            <el-table-column
                    prop="nick"
                    label="昵称">
            </el-table-column>
            <el-table-column
                    prop="regtime"
                    label="申请时间">
            </el-table-column>
               <el-table-column
                       prop="status"
                       label="状态">
                   <template slot-scope="scope">
                       <el-tag :type="scope.row.status === 1?'success':''">
                           {{scope.row.status === 1? '通过审核': '未审核'}}

                       </el-tag>
                   </template>
               </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-check" circle @click="agree(scope.row.id)"></el-button>

                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div style="margin: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import request from '../utils/request'

    export default {
        data() {
            return {

                form: {},
               status:'',

                search: '',
                //当前页
                currentPage: 1,
                status:0,
                pageSize: 5,
                //总共的数量
                total: 2,
                tableData: []
            }
        },
        created() {
            this.load()




        },

        methods: {
            //查询  带有参数需要用params
            load() {
                request.get("/user/selectPage", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search,
                        status:this.status
                    }

                }).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },

            agree(id){
                this.$confirm('你确定要通过审核,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '驳回',
                    type: 'success'
                }).then(async ()=>{
                    request.put("/user/agree/"+id).then(res=>{
                        this.$message({
                            message:'审核通过',
                            type:'success'
                        })
                        this.load()
                    })
                }).catch(()=>{
                    this.$message({
                        message:"驳回申请",
                        type:'success'
                    })
                })
            },


            //页码 每页的个数
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },
            //改变当前页
            handleCurrentChange(pageNum) {
                this.currentPage = pageNum
                this.load()
            },
        },

    }
</script>
<style>

</style>
